<template>
	<view class="container">
		<!-- 背景图 -->
		<image class="bg-image" src="/static/images/BG.png" mode="aspectFill"></image>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 标题 -->
			<view class="title-section">
				<text class="main-title">云创八条申请</text>
				<text class="sub-title">YUNCHUANG BA TIAO SHENQING</text>
			</view>

			<!-- 按钮区域 -->
			<view class="button-section">
				<view class="button-row" v-for="(list, index) in buttonList" :key="index">
					<view :style="{ backgroundImage: `url(${item.image})` }" v-for="(item, index) in list" class="button-item" :class="`button-item-${index + 1}`" @click="navigateTo(item.key)">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 页面路径映射
			pageRoutes: {
				'jobSubsidy': '/pages/jobSubsidy/index',
				'youthHostel': '/pages/youthHostel/index',
				'affordableHousing': '/pages/affordableHousing/index',
				'settlementSubsidy': '/pages/settlementSubsidy/index',
				'employmentSubsidy': '/pages/employmentSubsidy/index',
				'housingPurchaseSubsidy': '/pages/housingPurchaseSubsidy/index',
				'startupSubsidy': '/pages/startupSubsidy/index',
				'youthStartupLoan': '/pages/youthStartupLoan/index',
				'skillSubsidy': '/pages/skillSubsidy/index',
				'householdMove': '/pages/householdMove/index'
			},
			buttonList: [
				[
					{
						title: '求职面试交通补贴',
						image: '/static/images/面试交通补贴.png',
						key: 'jobSubsidy'
					},
					{
						title: '青年驿站入住申请',
						image: '/static/images/青年驿站入驻.png',
						key: 'youthHostel'
					},

					{
						title: '保障性住房申请',
						image: '/static/images/住房补贴.png',
						key: 'affordableHousing'
					},
				],
				[
					{
						title: '安家补贴申请',
						image: '/static/images/安家补贴申请.png',
						key: 'settlementSubsidy'
					},

					{
						title: '就业生活补贴',
						image: '/static/images/就业生活.png',
						key: 'employmentSubsidy'
					},

					{
						title: '购房补贴申请',
						image: '/static/images/购房补贴.png',
						key: 'housingPurchaseSubsidy'
					},
				],
				[
					{
						title: '创业补贴申请',
						image: '/static/images/创业补贴.png',
						key: 'startupSubsidy'
					},
					{
						title: '青年创业贷款申请',
						image: '/static/images/青创贷.png',
						key: 'youthStartupLoan'
					},
					{
						title: '技能补贴申请',
						image: '/static/images/技能提升.png',
						key: 'skillSubsidy'
					},
				],
				[
					{
						title: '户籍迁移申请',
						image: '/static/images/户口迁入.png',
						key: 'householdMove'
					},
					// {
					// 	title: '求职面试文旅礼包',
					// 	image: '/static/images/求职文旅.png',
					// 	key: 'jobSubsidy'
					// }
				]
			]
		}
	},
	methods: {
		navigateTo(key) {
			// 跳转到配置页面，传入对应的 key
			uni.navigateTo({
				url: `/pages/config/config?key=${key}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.content {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-top: 100rpx;
}

.title-section {
	text-align: center;
	margin-bottom: 80rpx;
    width: 100%;
}

.main-title {
	display: block;
	font-size: 60rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20rpx;
    text-align: left;
}

.sub-title {
	display: block;
	font-size: 24rpx;
	color: #fff;
    text-align: left;
	letter-spacing: 4rpx;
}

.button-section {
	width: 100%;
	margin-left: -20rpx;
}

.button-row {
	display: grid;
    gap: 10rpx;
    grid-template-columns: repeat(3, 1fr);
}

.last-row {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    max-width: 60%;
    margin: 0 auto;
}

.button-item {
    margin-top: -20rpx;
    flex: 1;
	height: 240rpx;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.button-icon {
	font-size: 48rpx;
	margin-bottom: 16rpx;
}

.button-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
	line-height: 1.4;
	font-weight: 500;
}

</style>
